<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <style type="text/css">
      .main{height:100%;}
      .speech-wrap{padding:20px 0px; background:#fff;}
      .hall-note{height:20px; line-height:20px; font-size:18px; color:#c60108; padding-left:10px; margin-top:30px;}
      .sbig .hall-one{border-bottom:4px solid #dedede;}
      .sbig .hall-tit{min-height:70px; line-height:24px; padding-top:30px; padding-bottom:20px;}
      .sbig .hall-tit .left{
        color:#0099aa; font-size: 18px; padding-left: 5px;}
      .sbig .hall-tit .left span.icon{width:10px; display:block; color:#62c3d0; font-size:13px;}
      .sbig .hall-tit .left span.icon{width:10px; display:block; color:#ccc; font-size:13px; float:left;}
      .sbig .hall-tit .left .sn{width:20px; text-align:center; font-size:18px; color:#0099aa; float:left;}
      .sbig .hall-tit .left .hall-name{padding-left:5px; float:left; font-size:20px; color:#0099aa; line-height:24px;}

      .sbig .hall-tit .right{width:90px;  text-align: right; padding-right:10px;}
      .sbig .hall-tit .right a{color: #c60108; font-size: 14px;}
      .bpoint{overflow:hidden; padding-right:1px;}
      .bpoint .one{width:50%; float:left; background-color:#f0f0f0; padding-left:1px;}
      .bpoint .one .p{width:100%; position:relative;}
      .bpoint .one .p .empty{width:100%; height:0; padding-bottom:100%;}
      .bpoint .one .p .pic{width:100%; height:0; padding-bottom:100%; overflow:hidden;}
      .bpoint .one .p .pic .bg{width:100%; background-size:200%; background-position:center center; background-repeat: no-repeat;}
      .bpoint .one .p .opr{width:100%; height:30px; position:absolute; left:0; bottom:0;}
      .bpoint .one .p .opr .w{width:100%; height:30px;}
      .bpoint .one .p .opr .w .l{background-color:rgba(0,0,0,0.5);}
      .bpoint .one .p .opr .audio-btn{width:30px; height:28px; line-height:20px; padding-top:3px; margin-right:5px; display:block; text-align:center; font-size:28px; color:#fff; opacity:0.5;}
      .bpoint .one .p .opr .btn-playing{opacity:1;}
      .bpoint .one .p .opr .audio-btn i{font-size:18px; height:20px; line-height:26px; margin-top:2px;}
      .bpoint .one .p .opr .audio-btn i.am-icon-spin{font-size:16px; margin-top:-4px;}
      .bpoint .one .p .opr .progress{height:30px;}
      .bpoint .one .p .opr .progress .bar{width:50%; height:1px; margin-top:15px; margin-right:6px; overflow:hidden; background-color:rgba(255,255,255,0.5);}
      .bpoint .one .p .opr .progress .bar .played{width:0; height:1px; float:left; background-color:#fff; overflow:hidden;}
      .bpoint .one .p .opr .progress .time{width:35px; margin-left:3px; height:30px; line-height:34px; font-size:10px; color:#fff;}
      .bpoint .one .p .opr .progress .playing-gif{width:20px; height:30px; margin-top:3px;}
      .bpoint .one .p .opr .progress .playing-gif img{vertical-align:middle;}
      .bpoint .one .p .opr .no-audio{height:30px; line-height:30px; font-size:12px; color:#999;}
      .bpoint .one .p .opr .expand{
        width:30px; height:30px; display:block; line-height:30px; text-align:center; color:#fff;
        opacity:0.5; font-size:16px; background-color:rgba(0,0,0,1); border-left:1px solid #454545;
      }
      .bpoint .one .point-name-playing{color:#c60108;}
      .bpoint .one .grey{color:#999;}
      .bpoint .one .name{height:34px; line-height:30px; padding: 0px 5px; font-size:14px; color:#000; background-color:#fff;}

      .bpoint .one .name .sn{height:30px; line-height:30px; margin-right:3px;}
      .bpoint .one .name .short-name{
        max-width: 135px; height:30px; line-height:30px; overflow:hidden;
      }
      .bpoint .one .name .marquee{
        width: 135px; height:30px; line-height:30px;
        white-space: nowrap; overflow: hidden; box-sizing: border-box;
      }
      .bpoint .one .name .marquee span{
        display: inline-block; -webkit-animation: marquee 15s linear infinite; animation: marquee 15s linear infinite;
      }
    </style>
</head>
<body>
  <div id="App" class="main hide">
    <div class="speech-wrap">
      <div class="sbig">
        <div v-for="(v, k) in data">
          <div class="hall-note" v-if="v.note"><i class="iconfont icon-xia"></i> {{v.note}}</div>
          <div class="hall-one">
            <div class="hall-tit dflex">
              <div class="left flex-1" @click="bigHiddenPoint(k);" show-points="0">
                <div class="dflex">
                  <span class="icon ico iconfont" :class="{'icon-caretdown':v.hidden_point&&v.big_hidden_point==1, 'icon-caretup':v.hidden_point&&v.big_hidden_point==0}"></span>
                  <div class="sn">{{v.sn}}</div>
                  <div class="hall-name flex-1">{{v.name}}</div>
                </div>
              </div>
              <div class="right">
                <a href="javascript:void(0);" v-if="v.map" @click="viewPic(files[v.map]);">
                  <i class="am-icon-map"></i> {{album.lang?'overview':'位置图'}}
                </a>
              </div>
            </div>

            <div class="bpoint">
              <div class="one" v-for="(vv, kk) in v.point" v-if="(vv.speech.audio || v.big_hidden_point==0)">
                <div class="p">
                  <div class="pic" @click="playInit(k, kk, -1);">
                    <div class="bg" :style="{height:height, backgroundImage:'url('+files[vv.images]+')'}"></div>
                  </div>
                  <div class="opr">
                    <div class="w dflex">
                      <div class="l dflex flex-1" @click="playInit(k, kk, -1);">
                        <div class="audio-btn" :class="{'btn-playing':vv.speech.playing}">
                          <i class="audio-ico am-icon-fw iconfont" :class="{'grey':!vv.speech.audio, 'icon-bofang9':vv.speech.playing==false||playing.paused, 'icon-zanting6':vv.speech.playing&&!playing.paused}"></i>
                        </div>
                        <div v-if="vv.speech.audio" class="progress flex-1">
                          <div class="dflex">
                            <div class="bar" :style="{width:vv.speech.bar_w-45+'%'}">
                              <div class="played"></div>
                            </div>
                            <div class="time">{{vv.speech.period_showing}}</div>
                            <div class="flex-1 playing-gif">
                              <img v-if="vv.speech.playing" src="../image/playing2.gif">
                            </div>
                          </div>
                        </div>
                        <div v-else class="no-audio">{{album.lang?'No audio available':'暂无语音讲解'}}</div>

                      </div>
                      <a href="javascript:void(0);" @click="viewPic(files[vv.images]);" class="expand"><i class="iconfont icon-quanping"></i></a>
                    </div>
                  </div>
                </div>

                <div class="name dflex" @click="playInit(k, kk, -1);">
                  <div class="sn">{{v.sn}}{{vv.sn}}-</div>
                  <div class="short-name flex-1" v-if="!vv.speech.playing||(vv.speech.playing&&vv.name.length<=name_max_len)">{{vv.short_name}}</div>
                  <div class="marquee flex-1" v-if="vv.speech.playing&&vv.name.length>name_max_len"><span>{{vv.name}}</span></div>
                </div>


              </div>

              <div class="one blank" v-if="(v.big_hidden_point==1 && v.point_audio_num%2==1) || (v.big_hidden_point==0 && v.point.length%2==1)">
                <div class="p"><div class="empty"></div></div>
                <a class="name" style="width:100%; display:block; background-color:#fff;" href="javascript:void(0);">&nbsp;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
var vue;
apiready = function(){
  vue = new Vue({
      el: '#App',
      data: {
        heigth:0,
        did:0,
        aid:0,
        files:[],
        data:[],
        album:{},

        playing:{
          hk:-1,        //当前播放的对象展厅序号
          pk:-1,        //当前播放的对象看点序号
          ek:-1,        //当前播放的对象扩展序号
          paused:true,  //当前播放的音频状态（播放中/已暂停）
        }
      },
      methods: {
          playInit:function(hk, pk, ek){
            if(ek>=0){
              if(!this.data[hk].point[pk].extend[ek].audio){
                return false;
              }
            }else{
              if(!this.data[hk].point[pk].speech.audio){
                return false;
              }
            }
            api.sendEvent({
                name: 'PlayEvent',
                extra: {hk:hk, pk:pk, ek:ek}
            });
          },
          bigHiddenPoint:function(_k){
            var flag = this.data[_k].big_hidden_point==1?0:1;
            this.data[_k].big_hidden_point = flag;
          },
          playingOne:function(playing){
            var that = this;
            if(playing.ek==-1){
              that.data[playing.hk].point[playing.pk].speech.playing = true;
            }else{
              that.data[playing.hk].point[playing.pk].extend[playing.ek].playing = true;
            }
            that.playing.paused = playing.paused;
          },
          playingStopOne:function(playing){
            var that = this;
            if(playing.ek==-1){
              that.data[playing.hk].point[playing.pk].speech.playing = false;
            }else{
              that.data[playing.hk].point[playing.pk].extend[playing.ek].playing = false;
            }
            that.playing.paused = playing.paused;
          },
          playingStopAll:function(){
            var that = this;
            for(var i in that.data){
              for(var j in that.data[i].point){
                if(that.data[i].point[j].speech){
                  that.data[i].point[j].speech.period_showing = that.data[i].point[j].speech.period_show;
                  that.data[i].point[j].speech.playing = false;
                }
                for(var k in that.data[i].point[j].extend){
                  that.data[i].point[j].extend[k].period_showing = that.data[i].point[j].extend[k].period_show;
                  that.data[i].point[j].extend[k].playing = false;
                }
              }
            }
            that.playing.paused = true;
          },
          viewPic: function(images){
            api.sendEvent({
                name: 'PicViewEvent',
                extra: {images:images}
            });
          }
      },
      created: function() {
        var that = this;

        var did = api.pageParam.did;
        that.did = did;

        var aid = api.pageParam.aid;
        that.aid = aid;

        that.files = $api.getStorage('files');

        var data = $api.getStorage('plays')[aid];

        var album = data.album;
        that.album = album;

        that.height = api.frameWidth/2+'px';

        var _d = data.rows;

        var name_max_len = that.album.lang?24:10;
        that.name_max_len = name_max_len;

        for(var i in _d){

          _d[i].list_hidden_point = 1;
          _d[i].big_hidden_point = 1;
          _d[i].point_audio_num = 0;  //有语音的看点的个数

          for(var j in _d[i].point){

            //看点标题
            if(_d[i].point[j].name.length>name_max_len){
              _d[i].point[j].short_name = _d[i].point[j].name.substr(0, name_max_len)+'...';
            }else{
              _d[i].point[j].short_name = _d[i].point[j].name;
            }


            if(_d[i].point[j].speech){
              var period_show = common.getPeriodShow(_d[i].point[j].speech.period);
              _d[i].point[j].speech.period_showing = _d[i].point[j].speech.period_show = period_show;
              var bar_w= parseInt(_d[i].point[j].speech.period/360*100)+60;
               if(bar_w>90){bar_w=90;}
               _d[i].point[j].speech.bar_w = bar_w;
               _d[i].point[j].speech.playing = false;
               _d[i].point[j].speech.played = 0;
               _d[i].point[j].speech.playSeconds = 0;
            }

            for(var k in _d[i].point[j].extend){
              var period_show_extend = common.getPeriodShow(_d[i].point[j].extend[k].period);
              _d[i].point[j].extend[k].period_show = period_show_extend;
              _d[i].point[j].extend[k].period_showing = period_show_extend;
              var bar_w = parseInt(_d[i].point[j].extend[k].period/360*100)+60;
              if(bar_w>90){bar_w=90;}
              _d[i].point[j].extend[k].bar_w = bar_w;
              _d[i].point[j].extend[k].playing = false;
              _d[i].point[j].extend[k].played = 0;
              _d[i].point[j].extend[k].playSeconds = 0;
            }
            if(!_d[i].point[j].speech.audio && _d[i].point[j].extend.length<1){
              _d[i].hidden_point = true;
            }
            if(_d[i].point[j].speech.audio){
              _d[i].point_audio_num += 1; //计算有语音的看点的个数
            }
          }
        }
        that.data = _d;

        //播放的一推监听
        api.addEventListener({
            name: 'Playing'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingOne(playing);
        });

        api.addEventListener({
            name: 'PlayingPause'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingOne(playing);
        });

        api.addEventListener({
            name: 'PlayingStop'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingStopOne(playing);
        });

        api.addEventListener({
            name: 'PlayingStopAll'
        }, function(ret, err) {
          that.playingStopAll();
        });

        $api.removeCls($api.byId('App'), 'hide');

        setTimeout(function(){
          api.parseTapmode();
        }, 1000);
      }
  });
}

</script>
</html>
